<template>
  <div>
    <a-button type="link" @click="openArticleContent">{{ btnText }}</a-button>
    <a-modal
      :visible="show"
      width="70vw"
      height="60vh"
      style="min-height: 40vh"
      :title="form.title"
      :bodyStyle="{ padding: '10px' }"
      @cancel="show = false"
    >
      <div v-html="form.content" style="height: 600px;overflow-y: auto;"></div>
      <template slot="footer">
        <a-button @click="show = false">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  props: {
    btnText: {
      type: String,
      default: '操作指引',
    },
    articleNo: {
      type: String,
      default: '操作指引',
    },
  },
  components: {},
  data() {
    return {
      form: {},
      show: false,
      urls: {
        info: '/hteSystemArticle/infoByNo',
      },
    }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    openArticleContent() {
      if(this.articleNo){
        this.fetchForm()
      this.show = true
      }
    },
    fetchForm() {
      if (this.articleNo) {
        getAction(this.urls.info + '?articleNo=' + this.articleNo).then((res) => {
          if (res.success) {
            this.form = res.result
          } else {
            this.$message.error('加载数据失败')
          }
        })
      }
    },
  },
}
</script>
